<template>
	<view class="container">
		<view class="info-box primary-bg">
			<view open-type="getUserInfo" class="avatar">
				<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
			</view>
			<view class="user-info">
				<view class="username text-white">微信用户</view>
				<view v-if="phone" class="tips-txt" open-type="getPhoneNumber" type="primary">{{phone}}</view>
				<view v-else class="auth-box">
					<view class="btn-group" style="margin-left: -24rpx;">
						<button class="tips-txt" style="background: #000000;text-align: left;margin-right: 20rpx" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">授权手机号</button>
					</view>
				</view>
				<view>
					<button style="margin-top: -75rpx;margin-left: 400rpx;" class="button" @click="addEx()">提交</button>
				</view>
			</view>
		</view>

		<view class="list-container">
			<view class="primary-bg i-list-item" style="margin-bottom: 20rpx;height: 120rpx;">
				<text style="color: #f00;">*</text>地址：<input style="width: 60%;text-align: center;" v-model="address" />
			</view>
		</view>
		<!--<view class="list-container">-->
			<!--<view class="primary-bg i-list-item" style="margin-bottom: 20rpx;height: 120rpx;">-->
				<!--联系手机：<input style="width: 60%;text-align: center;" v-model="contactPhone" />-->
			<!--</view>-->
		<!--</view>-->
		<view class="list-container" style="background: white;color: black">
			<u-sticky bgColor="#fff">
				<u-tabs
						:list="list2"
						:is-scroll="false"
						:current="current"
						bar-width="50"
						active-color="orange"
						@change="change">
				</u-tabs>
			</u-sticky>
			<view >
				<!-- 表格头部标题 -->
				<view class="table-header">
					<text class="table-header-item">行号</text>
					<text class="table-header-item">商品名称</text>
					<text class="table-header-item">数量(单位)</text>
					<text class="table-header-item">备注</text>
				</view>
				<!-- 表格内容 -->
				<scroll-view class="table-scroll-view" scroll-y="true">
					<block v-for="(item, index) in tableData" :key="index">
						<view class="table-row">
							<text class="table-row-item">{{ item.retainfield1 }}</text>
							<text class="table-row-item">{{ item.productName }}</text>
							<input type="number" style="margin-left: 10rpx;width: 110rpx;text-align: center;" v-model="item.num" />{{ item.unit }}
							<input style="margin-left: 40rpx;width: 160rpx;text-align: center;" v-model="item.remakeInfo" />
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<u-modal :show="show"
				 @confirm="confirm"
				 @cancel="cancel"
				 confirmText="家装"
				 confirmColor="#ff5722"
				 cancelText="装修"
				 cancelColor="#0b8ac3"
				 showCancelButton="true"
				 buttonReverse="true"
				 :title="title"
				 :content='content'>

		</u-modal>
	</view>
</template>

<script>

	export default {
		onShareAppMessage() {
			return {
				title: '赐丰订单',
				path: '/pages/index/index',
				imageUrl: '/static/ewm.jpg'
			}
		},
		components: {},
		data() {
			return {
				show:false,
				type: null,
				title:'请选择用户类型',
				phone: null,
				// 地址
				address: null,
				//联系手机
				contactPhone: null,
				current: 0,
				//tab
				list2: [],
				isLogin: false,
				// 当前页码
				currentPage: 1,
				// 每页显示的条数
				pageSize: 10,
				// 表格数据
				number: 0,
				successList: [],
				tableData: [],
				tableListAll:[],
				tableList: []
			}
		},
		onLoad() {
			const phoneObj = uni.getStorageSync('phone');
			const typeObj = uni.getStorageSync('type');
			if (typeObj && typeObj.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < typeObj.expire) {
					this.type = typeObj.value;
					this.show = false;
				} else {
					// 缓存过期，清空本地缓存
					this.type = null;
					this.show = true;
					uni.removeStorageSync('type');
				}
			}else{
				// 缓存过期，清空本地缓存
				this.type = null;
				this.show = true;
			}
			this.address = uni.getStorageSync('address').value;
			if (phoneObj && phoneObj.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < phoneObj.expire) {
					this.phone = phoneObj.value;
					this.contactPhone = phoneObj.value;
					this.isLogin = true;
				} else {
					// 缓存过期，清空本地缓存
                    this.phone = null;
					uni.removeStorageSync('phone');
					this.isLogin = false;
				}
			}else{
				// 缓存过期，清空本地缓存
				this.phone = null;
				this.isLogin = false;
			}
			// 加载第一页数据
			this.getDict()
		},
		computed: {

		},
		methods: {
			confirm() {
				console.log("家装")
				this.type = "家装"
				var now = new Date().getTime();
				var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
				uni.setStorageSync('type', {
					value: "家装",
					expire: expire
				});
				this.show = false;
			},
			cancel() {
				console.log("装修")
				this.type = "装修"
				var now = new Date().getTime();
				var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
				uni.setStorageSync('type', {
					value: "装修",
					expire: expire
				});
				this.show = false;
			},
			// 上一页
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--
					this.getPage(this.currentPage)
				}else{
					uni.$u.toast('第一页')
				}
			},
			// 下一页
			nextPage() {
				if (this.currentPage < this.tableList.length) {
					this.currentPage++
					this.getPage(this.currentPage)
				}else{
					uni.$u.toast('最后一页')
				}
			},

			addEx(){
				if(!this.isLogin){
					uni.$u.toast('请先授权手机号')
					return
				}
				if(this.address == null||this.address == 'null'||this.address == undefined||this.address == 'undefined'||this.address == ''||this.address == ' '){
					uni.$u.toast('地址不能为空')
					return
				}
				var that = this
				that.list2.forEach(function (itemList) {
					debugger

					var type = itemList.val -1;
					var objList =  that.tableListAll[type]
					objList.forEach(function (obj) {
						obj.forEach(function (item) {
							if(item.num!=undefined&&item.num!='undefined'&&item.num!=null&&item.num!='null'&&item.num!=''&&item.num!=' ') {
								item.num = item.num.replace(/[\s\-\_\!\@\#\$\%\^\&\*\(\)\+\=\{\}\[\]\|\\\;\:\'\"\,\.\<\>\?\/\~\`\·\！\￥\…\（\）\——\【\】\、\|\；\：\‘\“\”\，\。\？\、\~\——]/g, '');
								that.successList.push(item)
							}
						})
					})
				})
				if(that.successList.length>0){
					uni.request({
						data: {
							phone:that.phone,
							type:that.type,
							address:that.address,
							contactPhone:that.contactPhone
						},
						method: 'POST',
						url: that.bash + '/fApi/record/addEx',
						success: res => {
							if(res.data.code == 200) {
								that.successList.forEach(function (item) {
									that.addExData(item, res.data.data.id)
								});
							}
						}
					})
				}else{
					uni.$u.toast('请选择商品数量')
				}
			},

			getAddress() {
				var that = this
				uni.request({
					data: {
						phone: that.phone
					},
					method: 'GET',
					url: that.bash + '/fApi/record/list',
					success: res => {
						if(res.data.code == 200){
							var recordList = res.data.data
							if(recordList.length>0){
								var now = new Date().getTime();
								var expire = now + 360 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
								uni.setStorageSync('address', {
									value: that.recordList[0].address,
									expire: expire
								});
							}

						}
					}
				})

			},

			addExData(item,exId){
				var that = this
				that.number++
				item.productExid = exId
				item.createUser = that.phone
				item.updateUser = that.address
				item.type = that.type
				uni.request({
					data: item,
					method: 'POST',
					url: that.bash + '/fApi/exproduct/addExProduct',
					success: res => {
						if(res.data.code == 200){
							if(that.number == that.successList.length){
								uni.$u.toast('数据保存完成')
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					}
				})
			},

			getDict(){
				var that = this
				that.list2 = []
				uni.request({
					data: {
						dictType: 'product_type'
					},
					method: 'GET',
					url: that.bash + '/fApi/exproduct/listDict',
					success: res => {
						if(res.data.code == 200){
							var list = res.data.data;
							list.forEach(function (item) {
								that.list2.push(
									{
										name: item.dictLabel,
										val: item.dictValue,
									}
								)
							});
							this.getList()
						}
						else{
							console.log('数据获取失败')
						}
					}
				})
			},

			getPhoneNumber(e) {
				var that = this
				let phoneCode = e.detail.code
				if (!e.detail.code) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
						cancelText: '知道了',
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmText: '知道了',
						confirmColor: '#3C9CFFFF',
						success: res => {
							if (res.confirm) {
                                uni.removeStorageSync('phone');
                                uni.removeStorageSync('address');
                                that.phone = null;
                                that.address = null;
								that.isLogin = false;
								// uni.$u.route('/pages/login/mobile')
							} else if (res.cancel) {
                                uni.removeStorageSync('phone');
                                uni.removeStorageSync('address');
                                that.phone = null;
                                that.address = null;
								that.isLogin = false;
								//console.log('用户点击取消')
							}
						}
					})
				} else {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log(res)
							uni.request({
								data: {
									phoneCode: phoneCode,
									loginCode: res.code
								},
								method: 'POST',
								url: that.bash + '/fApi/wxuser/wxlogin',
								success: res => {
									if(res.data.code == 200){
										uni.$u.toast('获取成功')
										// 绑定成功后将手机号存储到本地缓存
										var phone = res.data.msg; // 获取到的手机号
										var now = new Date().getTime();
										var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
										uni.setStorageSync('phone', {
											value: phone,
											expire: expire
										});
										that.phone = res.data.msg;
										that.isLogin = true;
										that.getAddress()
									}
									else{
                                        uni.removeStorageSync('phone');
                                        uni.removeStorageSync('address');
                                        that.phone = null;
                                        that.address = null;
										that.isLogin = false;
										uni.$u.toast('获取失败')
									}
								}
							})
						}
					})
				}
			},

			change(index) {
				this.current = index.index;
				this.currentPage = 1;
				this.getPage(1)
				//如报错则用this.current = index.index;代替上面这句
			},

			getPage(page){
				var indexNum = page-1
				this.tableList = this.tableListAll[this.current];
				this.tableData = this.tableListAll[this.current][indexNum];
			},

			getList() {
				var that = this
				that.tableListAll = []
				uni.request({
					method: 'GET',
					url: that.bash + '/fApi/exproduct/list',
					success: res => {
						if (res.data.code == 200) {
							var productList = res.data.data;
							that.list2.forEach(function (item) {
								that.tableList = []
								var dataList = [];
								var data = [];
								productList.forEach(function (product) {
									if(product.productType == item.val){
										product.remakeInfo = undefined;
										data.push(product);
									}
								})
								if (data.length > 0) {
									dataList.push(data);
									data = [];
								}
								debugger
								// 设置表格数据
								that.tableListAll.push(dataList);
								that.current = 0;
								that.getPage(1);
							})
						}
					}
				})

				// that.list2.forEach(function (item) {
                //
				// })

			}
		}
	}
</script>

<style>
	/* 表格样式 */
	.table-header {
		display: flex;
		background-color: #f2f2f2;
		padding: 10px;
	}
	.table-header-item {
		flex: 1;
		text-align: center;
	}
	.table-row {
		display: flex;
		border-bottom: 1px solid #c2c2c2;
		padding: 10px;
	}
	.table-row-item {
		flex: 1;
		text-align: center;
	}
	.table-scroll-view {
		height: 100%;
	}

	/* 分页样式 */
	.pagination {
		display: flex;
		justify-content: center;
		padding: 10px;
	}
	.pagination-item {
		background-color: #fff;
		border: 1px solid #c2c2c2;
		color: #444;
		cursor: pointer;
		margin: 0 5px;
		padding: 5px;
	}
	.pagination-item-active {
		background-color: #007aff;
		border-color: #007aff;
		color: #fff;
	}
</style>
<style>
	page {
		background: #e4e3e6;
		color: #090909;
	}
</style>
<style scoped lang="less">
	.container {
		.info-box {
			border-bottom: 2px solid #ffffff;
			height: 150upx;
			margin: 20upx 0;
			padding-left: 20upx;
			display: flex;
			.avatar {
				margin: 0;
				padding: 0;
				background: none;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20upx;
				.userinfo{
					width:100upx;
					height: 100upx;
					border-radius: 50%;
					display:flex;
					overflow: hidden;
				}
			}
			.user-info {
				height: 80upx;
				display: flex;
				flex-direction: column;
				.username {
					margin-top: 34upx;
					margin-bottom: 14upx;
				}
				.tips-txt{
					font-size: 20upx;
				}
			}
		}

		.list-container {
			border-bottom: 2px solid #ffffff;
			.i-list-item {
				display: flex;
				align-items: center;
				padding-left: 40upx;
				background: #f4fff8;
				border-bottom: 2px solid #ffffff;
				&:last-child {
					border-bottom: none;
				}
			}
			.i-icon {
				width: 40upx;
				height: 40upx;
				margin-right: 50upx;
				&.i-icon-arrow-r {
					flex: 1;
					text-align: right;
					color: #ffffff;
					/*font-size: 40upx;*/
					margin-right: 80upx;
					font-weight: bold;
				}
			}
			.i-title {
				color: #ffffff;
				font-size: 32upx;
			}
		}
	}
</style>
<style scoped>
	.card {
		margin-top: 20rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 2rpx;
		box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	.card2 {
		/*margin-bottom: 10rpx;*/
		/*display: flex;*/
		padding: 3rpx;
	}
	.right {
		flex: 1;
		margin-left: 50rpx;
		margin-top: -30rpx;
	}
	.name {
		color: #999;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}

	.intro {
		font-size: 25rpx;
		color: #999;
		margin-top: 10rpx;
	}


	.button {
		margin-right: 10rpx;
		width: 100px;
		height: 30px;
		background-color: #007aff;
		color: #fff;
		font-size: 23rpx;
	}
</style>